// 图片懒加载组件
<template>
	<view>
		<image v-if="show" :src="src" mode="aspectFit"></image>
		<view v-else class="placeholder"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				observer: null
			}
		},
		props: {
			src: String
		},
		mounted() {
			this.observer = uni.createIntersectionObserver(this)
			this.observer.relativeToViewport().observe('.placeholder', (res) => {
				if (res.intersectionRatio > 0) {
					this.show = true
					this.observer.disconnect()
				}
			})
		},
		beforeDestroy() {
			this.observer && this.observer.disconnect()
		}
	}
</script>